<template>
  <div class="all">
    <div class="all-content" v-if="courses.length > 0">
      <div class="clearfix types-content">
        <div class="index-card-container course-container" v-for="course in courses" :key="course.coursewareId">
          <router-link target="_blank" :to="{ path: '/courseware/course', query: { id: course.coursewareId } }">
            <div class="course-stat">进阶</div>
            <div class="course-card">
              <img :src="course.photo" width="290" height="220" />
            </div>
            <div class="course-card-content">
              <h3 class="s-txt" :title="course.coursewareName">{{ course.coursewareName }}</h3>
              <div class="course-card-info">
                <span></span>
              </div>
              <div class="course-progress">
                <el-progress :percentage="course.percentage" :show-text="false"></el-progress>
              </div>
              <div class="progress-declare">已完成{{ course.percentage }}%</div>
            </div>
            <div class="course_other"></div>
          </router-link>
        </div>
      </div>
    </div>
    <div v-if="courses.length == 0" class="noData">暂无数据</div>
    <el-pagination
      background
      v-if="courses.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.page"
      :page-size="pagination.limit"
      layout="total, prev, pager, next"
      :total="pagination.total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      courses: []
    };
  },
  created() {
    //我的学习
    this.getMyLearn();
  },
  methods: {
    getMyLearn() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/userLearnRecords/selectAllRecords",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/userLearnRecords/selectAllRecords", time),
            timestamp: time
          },
          data: {
            pageIndex: that.pagination.page + "",
            pageSize: that.pagination.limit + ""
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.pagination.total = res.data.total;
            res.data.list.forEach(elem => {
              elem.photo = that.config.imgPath + elem.photo;
              elem.percentage = parseFloat(elem.percentage.slice(0, -1));
            });
            this.courses = res.data.list;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getMyLearn();
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
    }
  }
};
</script>
<style scoped>
.all-slt {
  width: 145px;
  height: 45px;
  margin: 34px 20px 11px 0px;
}
.all {
  padding-top: 20px;
  background-color: #f6f6f6;
}
.all-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.types-content {
  width: 1200px;
  margin: 0 auto;
}
.course-container {
  width: 268px;
  height: 268px;
  position: relative;
  border: 1px solid rgb(207, 206, 206);
}
.course-container .course-stat {
  position: absolute;
  font-size: 12px;
  z-index: 5;
  color: #ffffff;
  line-height: 20px;
  padding: 0 8px;
  background-color: gray;
}
.index-card-container {
  display: inline-block;
  margin-right: 40px;
  margin-bottom: 12px;
}
.index-card-container:nth-child(4n) {
  margin-right: 0;
}
.course-container .course-card {
  width: 270px;
  height: 148px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid rgb(207, 206, 206);
}
.course-container .course-card-content {
  padding: 8px;

  height: 90px;
}
.course-container .course-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.course-container .course-card-content h3 {
  font-size: 18px;
  color: #161617;
  letter-spacing: 0.07px;
}
.course-container .course-card-content .course-card-info {
  line-height: 18px;
  margin-top: 10px;
  font-weight: 400;
  font-size: 14px;
  color: #676767;
  letter-spacing: 0.05px;
}
.r {
  float: right;
}
.course-progress {
  padding-top: 10px;
}
.progress-declare {
  padding-top: 8px;
  color: #6e6e6e;
}
.noData {
  text-align: center;
  color: #ccc;
  font-size: 1.2em;
  padding-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  margin: 0;
}
.el-pagination {
  margin: 0;
  padding-bottom: 10px;
}
</style>
